<template>
  <div class="all">
    <div class="messages">
      <div class="yn">
        <el-switch
          width="60"
          v-model="value1"
          active-text="求"
          inactive-text="供"
        >
        </el-switch>
      </div>

      <div class="phone">
        <p style="font-size: 20px">联系方式：</p>
        <el-input
          style="width: 300px; margin-top: 10px; margin-bottom: 10px"
          v-model="input"
          placeholder="例如：手机号码"
        ></el-input>
      </div>

      <div class="title">
        <el-input
          style="
            width: 100%;
            margin-top: 2px;
            margin-bottom: 1px;
            border-radius: 8px;
          "
          v-model="input"
          placeholder="标题"
        ></el-input>
      </div>

      <div style="border: 1px solid #ccc; border-radius: 8px" class="text">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 400px; overflow-y: hidden; border-radius: 8px"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
        />
      </div>

      <div class="qr">
        <div class="he">
          <div class="fl">
            <el-select v-model="value" placeholder="请选择分类">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <button class="fb">发布</button>
        </div>
      </div>
    </div>
    <div class="tips">
      <div class="zz">
        <h4>尊重原创</h4>
        <p>
          请不要发布任何盗版下载链接，包括软件、音乐、电影等等。我们尊重原创。
        </p>
      </div>
      <hr />

      <div class="yh">
        <h4>友好互助</h4>
        <p>
          您的文章将会有成千上万人阅读，保持对陌生人的友善，用知识去帮助别人也是一种快乐。
        </p>
      </div>
      <hr />
      <div class="cf">
        <h4>处罚</h4>
        <p>
          禁止发布垃圾广告!<br />
          发现垃圾广告，本站会立刻封停您的账户!<br />
        </p>
      </div>
    </div>
  </div>
</template>


<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
  components: { Editor, Toolbar },

  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "猫猫领养",
        },
        {
          value: "选项2",
          label: "狗狗领养",
        },
        {
          value: "选项3",
          label: "猫猫发布",
        },
        {
          value: "选项4",
          label: "狗狗发布",
        },
      ],
      value: "",

      input: "",
      value1: true,
      value2: true,

      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
    };
  },

  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.qr{
  border: 1px solid rgb(208, 207, 207);
  height: 50px;
  border-radius: 8px;
  background-color: rgba(247, 245, 245, 0.855);
  
}
.he {
  float: right;
  display: flex;
}
.fb{
    background-color: rgb(193, 98, 15);
    width: 80px;
    border:  1px solid rgb(208, 207, 207);
    border-radius: 8px;
    margin:5px 5px;
    color: white;
    cursor:pointer;
}
.fl{
    margin:5px 5px;

}

.text {
  margin-top: 1px;
}

.zz {
  height: 60px;
  margin: 25px 10px;

  p {
    font-size: small;
    margin-top: 3px;
  }
}

.yh {
  height: 60px;
  margin: 25px 10px;

  p {
    font-size: small;
    margin-top: 3px;
  }
}

.cf {
  height: 60px;
  margin: 25px 10px;
  p {
    font-size: small;
    margin-top: 3px;
  }
}
.tips {
  border: 1px solid rgb(208, 207, 207);
  border-radius: 10px;
  background-color: rgba(247, 245, 245, 0.855);
  margin-top: 8px;
  margin-left: 8px;
  width: 22%;
  text-align: left;
  height: 340px;
}
.all {
  display: flex;
  background-image: linear-gradient(
    to bottom,
    rgba(60, 60, 60, 0.2),
    rgb(255, 255, 255)
  );
}
.messages {
  width: 75%;
  text-align: left;
  margin-left: 10px;
  margin-top: 10px;
}

.yn {
  height: 40px;
  text-align: left;
  border: 1px solid rgb(208, 207, 207);
  line-height: 40px;
  border-radius: 10px;
  background-color: rgba(247, 245, 245, 0.855);
}
.phone {
  margin-top: 2px;
  border: 1px solid rgb(208, 207, 207);
  display: flex;
  border-radius: 10px;
  background-color: rgba(247, 245, 245, 0.855);

  p {
    text-align: left;
    margin-top: 15px;
    margin-left: 6px;
  }
}
</style>
